<template>
  <div class="detail">
    <div class="tabs">
      <div class="item" :class="{active:active==0}" @click="tap(0)">库位修改</div>
      <div class="item" :class="{active:active==1}" @click="tap(1)">我的记录</div>
      <div class="item" :class="{active:active==2}" @click="tap(2)">本店记录</div>
    </div>
    <template v-if="active != 0">
      <div class="bList postion">
        <div class="li">
          <div class="tb tr1">日期</div>
          <div class="tb tr2">品名</div>
          <div class="tb tr3">原库位</div>
          <div class="tb tr4">新库位</div>
          <div class="tb tr5">修改人</div>
        </div>
      </div>
      <div class="bList sayer">
        <van-list v-model="loading" :finished="finished" finished-text="没有更多了" :immediate-check="false" @load="getList" :offset='0' >
          <div class="li lader" v-for="(item, index) in list" :key="index">
            <div class="tb tr1">{{item.createtime}}</div>
            <div class="tb tr2">{{item.itemname}}</div>
            <div class="tb tr3">{{item.y_u_placecode}}</div>
            <div class="tb tr4">{{item.x_u_placecode}}</div>
            <div class="tb tr5">{{item.update_name}}</div>
          </div>
        </van-list>
      </div>
    </template>
    <div class="based" v-if="active == 0">
      <div class="banner ui-flex justify-center center">
        <div class="cell">
          <img :src="$config.ImgUrl+body.img_url" alt="">
        </div>
      </div>
      <div class="hdTop">
        <div class="title">{{body.itemname}}</div>
        <div class="guige">规格：{{body.frgnname}}</div>
      </div>
      <div class="hdTop" style="padding-bottom: 15px;">
        <div class="title">商品编码：{{body.itemcode}}</div>
        <div class="guige">保质期：{{body.u_freshday}}天</div>
      </div>
      <div class="base">
        <div class="list">
          <div class="item">
            <div class="li1">门店仓</div>
            <div class="li2">库位：{{body.u_placecode01}}</div>
            <div class="li3">
              <van-field v-model="placecode01" type="number" center clearable label="" placeholder="" ></van-field>
            </div>
            <div class="edit" @click="onedit(1)">修改</div>
          </div>
          <div class="item">
            <div class="li1">存货仓</div>
            <div class="li2">库位：{{body.u_placecode06}}</div>
            <div class="li3">
              <van-field v-model="placecode06" type="number" center clearable label="" placeholder="" ></van-field>
            </div>
            <div class="edit" @click="onedit(2)">修改</div>
          </div>
        </div>
      </div>
    </div>
    <div class="footer" :class="{ftActive:active != 0}">
      <div class="left" v-if="active == 0">商品</div>
      <div class="left" v-else>记录中查找</div>
      <div class="center">
        <van-search v-model="keyWord" show-action placeholder="请输入商品信息">
          <template #action>
            <div class="edit" @click="onSearch">搜索</div>
          </template>
        </van-search>
      </div>
      <div class="right">
        <van-icon name="scan" size="25" />
        <div class="ft">扫码</div>
      </div>
    </div>
  </div>
</template>

<script>
  import {field,search,icon,Dialog,Toast,list} from 'vant'
  export default{
    name: 'detail',
    components:{
      [field.name]: field,
      [search.name]: search,
      [icon.name]: icon,
      [Dialog.name]: Dialog,
      [Toast.name]: Toast,
      [list.name]: list
    },
    data(){
      return{
        active: 0,
        code: '',
        body: '',
        keyWord: '',
        placecode01: '',
        placecode06: '',
        list: [],
        total: 0,
        page: 0,
        loading: false,
        finished: false,
      }
    },
    mounted() {
      this.code = this.$route.query.code;
      this.onload();
    },
    methods:{
      async onedit(index){
        var params = {
          itemcode: this.body.itemcode,
          itemname: this.body.itemname,
          frgnname: this.body.frgnname,
        }
        if(index == 1){
          if(this.placecode01.length != 6){
            return Dialog.alert({
              title: '提示',
              message: '请输入6位数字',
            })
          }
          params.y_u_placecode = this.body.u_placecode01;
          params.x_u_placecode = this.placecode01;
          params.type = '01'
        } else {
          if(this.placecode06.length != 6){
            return Dialog.alert({
              title: '提示',
              message: '请输入6位数字',
            })
          }
          params.y_u_placecode = this.body.u_placecode06;
          params.x_u_placecode = this.placecode06;
          params.type = '06'
        }
        Toast.loading({
          message: '加载中...'
        });
        var res = await this.http.post('/location/index/edit', params);
        Toast.clear();
        var data = res.data;
        if(data.code == 200){
          Dialog.alert({
            title: '提示',
            message: data.msg,
          }).then((res) => {
            this.placecode01 = '';
            this.placecode06 = '';
            this.onload();
          })
        } else {
          Dialog.alert({
            title: '提示',
            message: data.msg,
          })
        }
      },
      async onSearch(){
        var params = {
          keyword: this.keyWord,
          page: this.page
        }
        var res = await this.http.get('/location/index/search',params);
        var data = res.data;
        if(data.code == 200){
          if(data.data.data.length == 1){
            this.code = data.data.data[0].itemcode;
            this.onload();
          } else {
            this.$router.push('/Home?keyword=' + this.keyWord)
          }
        } else {
          Dialog.alert({
            title: '提示',
            message: data.msg,
          })
        }
      },
      async onload(){
        var params = {
          itemcode: this.code
        }
        Toast.loading({
          message: '加载中...'
        });
        var res = await this.http.get("location/index/shopsinfo",params);
        Toast.clear();
        var data = res.data;
        if(data.code == 200){
          this.body = data.data;
        } else {
          Dialog.alert({
            title: '提示',
            message: data.msg,
          }).then(() => {
            this.$router.go(-1);
          });
        }
      },
      async getList(){
        this.loading = true;
        this.page = this.page + 1;
        var params = {
          type: this.active,
          page: this.page
        }
        var res = await this.http.get('location/index/log', params);
        this.loading = false;
        var data = res.data;
        if(data.code == 200){
          this.total = data.data.total;
          this.list = [...this.list, ...data.data.data];
        } else {
          this.loading = false;
          this.finished = true;
          return;
        }
        
        if(this.total == this.list.length){
          this.loading = false;
          this.finished = true;
        }
      },
      tap(index){
        this.active = index;
        if(index != 0){
          this.list = [];
          this.page = 0;
          this.finished = false;
          this.getList();
        }
      }
    }
  }
</script>

<style lang="scss">
  .detail{
    width: 100%;
    min-height: 100vh;
    background-color: #FFFFFF;
    .bList{
      &.sayer{
        // height: calc(100vh - 52px);
        padding-top: 80px;
        padding-bottom: 52px;
        overflow: auto;
        height: 100vh;
      }
      &.postion{
        width: 100%;
        position: fixed;
        left: 0;
        top: 40px;
        .li{
          background-color: #F5F5F5;
        }
      }
      .li{
        display: flex;
        align-items: center;
        height: 40px;
        &:nth-of-type(even){
          background-color: #F5F5F5;
        }
        &.lader{
          height: 35px;
          .tb{
            font-size: 11px;
          }
        }
        .tb{
          font-size: 13px;
          color: #333333;
          text-align: center;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          padding: 0 4px;
          &.tr1{
            width: 21%;
          }
          &.tr2{
            width: 37%;
          }
          &.tr3{
            width: 14%;
          }
          &.tr4{
            width: 14%;
          }
          &.tr5{
            width: 14%;
          }
        }
      }
    }
    .footer{
      position: fixed;
      left: 0;
      bottom: 0;
      z-index: 99;
      width: 100%;
      box-shadow: 0px 0px 32px 0px rgba(0, 0, 0, 0.15);
      background-color: #FFFFFF;
      height: 52px;
      display: flex;
      align-items: center;
      &.ftActive{
        background-color: #FF6400;
        box-shadow: none;
        .left{
          width: 100px;
          color: #FFFFFF;
        }
        .right{
          display: none;
        }
        .center{
          .edit{
            border-radius: 0;
            width: 72px;
          }
          .van-search__content{
            border: 0;
          }
        }
      }
      .center{
        flex: 1;
        .van-field{
          padding: 0;
          display: flex;
          align-items: center;
        }
        .van-field__left-icon{
          display: none;
        }
        .van-field__control{
          height: 25px;
        }
        .van-search__content{
          background-color: #FFFFFF;
          border: 1px solid #CCCCCC;
        }
        .van-search__action{
          background-color: #FFFFFF;
          padding-right: 0;
        }
        .van-search{
          padding: 0;
        }
        .edit{
          width: 52px;
          height: 25px;
          line-height: 25px;
          border-radius: 3px;
          background-color: #FF6400;
          color: #FFFFFF;
          font-size: 14px;
          text-align: center;
        }
      }
      .right{
        width: 60px;
        text-align: center;
      }
      .left{
        font-size: 14px;
        color: #333333;
        width: 60px;
        text-align: center;
      }
    }
    .base{
      background-color: #F0F2F5;
      padding: 0 14px;
      .list{
        padding: 38px 0;
        .item{
          display: flex;
          align-items: center;
          height: 25px;
          &:first-child{
            margin-bottom: 38px;
          }
          .edit{
            width: 52px;
            height: 25px;
            line-height: 25px;
            border-radius: 3px;
            background-color: #FF6400;
            color: #FFFFFF;
            font-size: 14px;
            text-align: center;
            margin-left: 10px;
          }
          .li3{
            text-align: right;
            flex: 1;
            .van-field{
              padding: 0;
              display: flex;
              align-items: center;
            }
            .van-field__left-icon{
              display: none;
            }
            .van-field__control{
              height: 25px;
              // width: 80px;
            }
            .van-search__content{
              background-color: #FFFFFF;
            }
            .van-search__action{
              background-color: #F0F2F5;
              padding-right: 0;
            }
            .van-search{
              padding: 0;
            }
          }
          .li2{
            font-size: 16px;
            color: #000000;
            text-align: left;
            padding-right: 10px;
          }
          .li1{
            font-size: 16px;
            color: #E42E3C;
            padding-right: 15px;
            text-align: left;
          }
        }
      }
    }
    .hdTop{
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 14px;
      padding-top: 14px;
      .guige{
        font-size: 15px;
        color: #000000;
        text-align: right;
      }
      .title{
        font-size: 15px;
        color: #000000;
        width: 228px;
        overflow: hidden;
        text-overflow:ellipsis;
        white-space: nowrap;
        text-align: left;
      }
    }
    .based{
      padding-top: 40px;
    }
    .banner{
      width: 100%;
      height: 288px;
      background-color: #FFFFFF;
      overflow: hidden;
      img{
        width: 100%;
      }
    }
    .tabs{
      height: 40px;
      line-height: 40px;
      background: linear-gradient(-90deg, #FF5100 0%, #FFAB3D 100%);
      display: flex;
      width: 100%;
      position: fixed;
      left: 0;
      top: 0;
      .item{
        flex: 1;
        text-align: center;
        font-size: 14px;
        color: #FFFFFF;
        position: relative;
        &.active{
          &::before{
            content: '';
            display: inline-block;
            width: 26px;
            height: 2px;
            background-color: #FFFFFF;
            position: absolute;
            bottom: 7px;
            left: 50%;
            transform: translateX(-50%);
          }
        }
      }
    }
    div{
      box-sizing: border-box;
    }
  }
</style>
